<template>
  <div>
    <el-table :data="table" border style="width:100%;" class="kxz-callLog__historyTable">
      <el-table-column prop="cU_ser" label="用户名" width="170">
      </el-table-column>
      <el-table-column prop="cMtel" label="手机号" width="110">
      </el-table-column>
      <el-table-column prop="relevanttel" label="关联号码" width="110">
      </el-table-column>
      <el-table-column prop="kfgroup" label="客服组" width="70">
      </el-table-column>
      <el-table-column prop="kfname" label="服务客服" width="100">
      </el-table-column>
      <el-table-column prop="id" label="受理单号" width="100">
      </el-table-column>
      <el-table-column prop="yiji" label="问题类型" width="100">
      </el-table-column>
      <el-table-column prop="thlx" label="通话类型" width="100">
      </el-table-column>
      <el-table-column label="通话内容" width="100">
        <template slot-scope="scope">
          <a href="javascript:;" class="check" @click="handleCheck(scope.row.callcontent)">点击查看</a>
        </template>
      </el-table-column>
      <el-table-column prop="state" label="处理情况" width="100">
      </el-table-column>
      <el-table-column prop="ttpsj" label="时间" width="100">
      </el-table-column>
      <el-table-column prop="thsj" label="通话时长" width="100">
      </el-table-column>
      <el-table-column prop="fstate" label="排队状态" width="100">
      </el-table-column>
      <!-- <el-table-column prop="pdhs" label="排队耗时" width="100">
      </el-table-column> -->
      <el-table-column prop="xlsj" label="响铃时间" width="100">
      </el-table-column>
      <el-table-column prop="myd" label="满意度" width="100">
      </el-table-column>
      <el-table-column label="通话录音" width="100">
        <template slot-scope="scope">
          <template v-if="scope.row.recordfile">
           <a 
              :href="scope.row.deviceType===0?('http://wznb.wsloan.com:8888/telrecord/main/listentovoice?date=/media/sda/voice/'+ (scope.row.recordfile ? scope.row.recordfile.slice(0, 8) :'' )+ '/'+(scope.row.recordfile? scope.row.recordfile.replace('_9', '_') : '') +'.wav'): ('http://report.wsloan.com:8888/record/'+scope.row.recordfile)"
               target="_blank" 
              :class="$style.click">播放</a>
                <a :href="'http://122.228.132.78:1980/main/download?path=/media/sda/voice/'+(scope.row.recordfile? scope.row.recordfile.slice(0, 8) :'')  + '/'+(scope.row.recordfile? scope.row.recordfile.replace('_9', '_') : '')+'.wav'" :class="$style.click" v-if="scope.row.recordfile">下载</a>
          </template>
          <span v-else>没有录音文件</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="prev,pager,next" :page-size:="pageSize" :total="pageTotal" @current-change="handlePageChange" :class="$style.txtRight"></el-pagination>
  </div>
</template>

<script>
export default {
  name: 'log-table',
  data() {
    return {
      pageSize:10,
      pageIndex:1,
      pageTotal: 1,
      table: []
    }
  },
  mounted() {
    this.getHistoryLog()
  },
  methods: {
    handleCheck(content){
      this.$emit('onCheckOpen',content)
    },
    handlePageChange(curIndex){
      this.pageIndex = curIndex
      this.getHistoryLog()
    },
    async getHistoryLog() {
      try{
        const {id} = this.$store.getters.callMsg.telMsg
        const cmobile = this.$store.getters.callMsg.mobile
        const pagesize = this.pageSize
        const page = this.pageIndex
        const {data} = await this.$get(this,{
          api: 'ajaxapi/callinfolist1.do',
          data:{
            cmobile,
            fUid:id || '',
            page,
            pagesize,
          }
        })
        if(data.state === 0){
          this.table = data.content.data
          this.pageTotal = data.content.num
        }
      }catch(e){
        this.$warn('系统ajaxapi/callinfolist1.do接口报错')
      }
    }
  }
}

</script>

<style lang="scss" module>
.txtRight{
  text-align:right;
}
</style>


<style lang="scss">
.kxz-callLog__historyTable {
  border-color: #dddfe6;
  th,
  td {
    height: 80px;
  }
  th {
    background: #fafbfc;
    font-size: 16px;
    .cell {
      background: #fafbfc;
      font-weight: normal;
      color: #444;
    }
  }
  td {
    $color: #7b8897;
    font-size: 14px;
    color: $color;
    text-align: center;
  }
  .cell {
    padding: 0;
    text-align: center;
  }
  tr:hover {
    td {
      background-color: #fff !important;
    }
  }
  .icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    &.icon-phone {
      background: url(../../../images/icon-phone.jpg) no-repeat;
    }
  }
  .check {
    $checkColor: #5394fc;
    color: $checkColor;
    border-bottom: 1px solid $checkColor;
  }
}
</style>
